<!DOCTYPE html>
<html>
  <head>
      <title>Examples</title>
      <style type="text/css">

      body {
        margin: 0 auto;
        max-width: 800px; 
      }
      .list .item {
        display: grid; 
        grid-template-columns: 200px 1fr 1fr;
        height: 30px;
        border-bottom: 1px solid #ececec; 
        padding: 10px;
      }

      .item.header {
        font-weight: bold;
      }
      </style>
  </head>
  <body>
    <h1>Summernote Examples </h1>

    <div class='list'>
      <div class='item header'>
        <div class='title'>
          Title(Link)
        </div>
        <div class='description'>
          Description
        </div>

        <div class='version'>

          Support Version
        </div>
      </div>
      <div class='list-body' id='listBody'></div>
    </div>
    

    <script type="text/javascript">
    var samples = [
      { title: 'Languages', link : 'lang.html', description: 'Support language setting', support: 'bs3, bs4, lite'},      
      { title: 'Record every key stroke', link : 'recordEveryKeyStroke.html', description: 'Support language setting', support: 'bs3, bs4, lite'},      
      { title: 'hint-emoji', link : 'hint-emoji.html', description: 'test hint ui ', support: 'bs3, bs4, lite'},
      { title: 'hint-userdefine', link : 'hint-userdefine.html', description: 'test hint userdefine ', support: 'bs3, bs4, lite'},
      { title: 'hint-symbol', link : 'hint-symbols_mathematical-symbols_Greek-letters.html', description: 'test hint symbol ', support: 'bs3, bs4, lite'},
      { title: 'jQuery custom event', link : 'jquery-custom-event.html', description: 'test jQuery custom event ', support: 'bs3, bs4, lite'},
      { title: 'Plugin : Hello', link : 'plugin-hello.html', description: 'Plugin sample - Hello', support: 'bs3, bs4, lite'},
      { title: 'Limited history stack', link : 'history-limit.html', description: 'Limited history stack', support: 'bs3, bs4, lite'},
      { title: 'Mode Switcher', link : 'mode-switcher.html', description: 'Change mode between Default and Air', support: 'bs3, bs4, lite'},      
      { title: 'Air Mode', link : 'airmode.html', description: 'run as airmode', support: 'bs3, bs4, lite'},      
      { title: 'Air Mode with scroll', link : 'airmode-scroll.html', description: 'run as airmode with scroll', support: 'bs3, bs4, lite'},      
      { title: 'External CodeMirror Constructor', link : 'external-codemirror.html', description: 'support external codemirror', support: 'bs3, bs4, lite'},            
    ]
    function generate_sample_pages() {
      var html = samples.map(it => {
   
          return   "<div class='item'>" + 
          "<div class='title'>" + 
              "<a href='/examples/"+it.link+"' target='summernote_window'>" + it.title + "</a>" + 
          "</div>" + 
          "<div class='description'>" + it.description + "</div>" + 
          "<div class='version'>"  + it.support + "</div>" + 
          "</div>"
      }).join('')

      document.getElementById('listBody').innerHTML = html 
    }

    generate_sample_pages();
    </script>

  </body>
  
</html>
